<!DOCTYPE html>
<html>
<head>
<#include "/common/common.ftl" parse=true encoding="utf-8">
<link href="${base}/styles/css/module/module-course.css"
	rel="stylesheet">
<link href="${base}/styles/css/coral_v9.6.7.1_1.css" rel="stylesheet">
<style>
hr {
	width: 900px;
	padding-left: 10px;
	margin-top: 35px;
	margin-bottom: 20px;
	border: 0;
	border-top: 1px solid #eee;
	float: right;
}

.info_ico {
	background: url(${base}/styles/images/course/info.png) no-repeat;
	padding: 0 5px 0 20px;
}

.info_date {
	background-position: 0 -1px;
}

.info_views {
	background-position: 0 -62px;
}

.info_comment {
	background-position: 0 -43px;
}

.info_category {
	background-position: 0 -21px;
}

.info_author {
	background-position: 0 -82px;
}

.post-navigation {
	clear: both;
	overflow: hidden;
}

.post-navigation div {
	display: block;
	position: relative;
	font-size: 14px;
	color: #999;
}

.post-navigation div a:after {
	position: absolute;
	color: #CCC;
	font-size: 56px;
	margin-top: -11px;
	height: 22px;
	line-height: 22px;
	top: 34%;
}

.post-previous a:after {
	content: '«';
	left: 0px;
}

.post-next a:after {
	content: '»';
	right: 0px;
}

.post-previous {
	float: left;
	padding-left: 40px;
}

.post-next {
	float: right;
	text-align: right;
	padding-right: 40px;
}

.twofifth {
	width: 38.08510638297872%;
}

a:link, a:visited {
	color: #474747;
	text-decoration: none;
	-webkit-transition: background-color .15s linear, color .15s linear;
	-moz-transition: background-color .15s linear, color .15s linear;
	-o-transition: background-color .15s linear, color .15s linear;
	-ms-transition: background-color .15s linear, color .15s linear;
	transition: background-color .15s linear, color .15s linear;
}

#ds-thread {
	clear: both;
	position: relative;
	overflow: visible;
	_zoom: 1;
}

.ds-thread {
	background: #fff;
	border: solid 1px #e3e3e3;
	border-bottom: solid 1px #ccc;
	padding: 20px;
}

#ds-reset, #ds-related-reads {
	font-weight: normal;
	font-size: 13px;
	font-size-adjust: none;
	color: #333;
	line-height: 1;
	text-align: left;
}

#ds-thread #ds-reset .ds-comments-info {
	width: 100%;
	font-size: 13px;
	margin-top: 10px;
	padding: 8px 0;
	line-height: 25px;
	position: relative;
}

#ds-thread #ds-reset .ds-sort {
	position: absolute;
	right: 0;
	top: 8px;
}

#ds-thread #ds-reset .ds-sort a {
	color: #999;
	padding: 0 4px;
	margin: 0 2px;
}

#ds-thread #ds-reset a {
	cursor: pointer;
	text-decoration: none;
	color: #777;
	background-color: transparent;
	-webkit-transition: color .15s linear;
	-moz-transition: color .15s linear;
	transition: color .15s linear;
}

#ds-thread #ds-reset ul, #ds-thread #ds-reset ul li {
	background: none;
	margin: 0;
	padding: 0;
}

#ds-thread #ds-reset li.ds-tab {
	display: inline;
	font-size: 13px;
	margin: 0 5px 0 0;
	padding: 0;
}

#ds-thread #ds-reset li.ds-tab a.ds-current {
	border: 1px solid #ccc;
	background-color: rgba(0, 0, 0, 0.04);
}

#ds-thread #ds-reset li.ds-tab a {
	text-shadow: 0 1px 0 #fff;
	padding: 3px 5px;
	display: inline;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#ds-thread #ds-reset a {
	cursor: pointer;
	text-decoration: none;
	color: #777;
	background-color: transparent;
	-webkit-transition: color .15s linear;
	-moz-transition: color .15s linear;
	transition: color .15s linear;
}

#ds-thread #ds-reset ul.ds-comments-tabs .ds-highlight {
	margin: 0 2px 0 0;
}

#ds-reset .ds-highlight {
	color: #d32 !important;
}

#ds-thread #ds-reset .ds-comments {
	width: 100%;
	border-bottom: 1px solid rgba(0, 0, 0, 0.13);
}

#ds-thread #ds-reset ul, #ds-thread #ds-reset ul li {
	background: none;
	margin: 0;
	padding: 0;
}

#ds-thread #ds-reset .ds-sort a.ds-current, #ds-thread #ds-reset .ds-sort a:active
	{
	color: #d32;
}

#ds-thread #ds-reset li.ds-post {
	width: 100%;
	overflow: hidden;
	clear: both;
	border-top: 1px solid rgba(0, 0, 0, 0.13);
	margin: 0;
	padding: 0;
	list-style: none;
}

#ds-thread #ds-reset ul, #ds-thread #ds-reset ul li {
	background: none;
	margin: 0;
	padding: 0;
}

#ds-thread #ds-reset .ds-post-self {
	position: relative;
	padding: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.7);
}

#ds-reset .ds-avatar {
	box-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
	position: relative;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background-color: #fff;
	float: left;
}

#ds-reset .ds-avatar img {
	display: block;
	width: 50px;
	height: 50px;
	max-width: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#ds-thread #ds-reset .ds-comment-body {
	padding-left: 60px;
}

#ds-thread #ds-reset .ds-comment-header {
	padding-top: 1px;
}

#ds-thread #ds-reset .ds-user-name {
	color: #777;
	font-size: 13px;
	margin-right: 8px;
}

#ds-thread #ds-reset .ds-comment-body p {
	font-size: 13px;
	line-height: 1.5em;
	margin: .5em 0;
	word-wrap: break-word;
}

#ds-thread #ds-reset .ds-comment-footer {
	line-height: 1.5em;
}

#ds-thread #ds-reset .ds-time {
	font-size: 12px;
	margin-right: 8px;
	color: #999;
	_zoom: 1;
}

#ds-reset .ds-icon {
	vertical-align: middle;
	display: inline-block;
	overflow: hidden;
	background: transparent url("//static.duoshuo.com/images/sprites.png")
		no-repeat;
	_background-image: url("//static.duoshuo.com/images/sprites.gif");
}

#ds-reset a .ds-icon {
	opacity: .6;
	-webkit-transition: opacity .15s linear;
	-moz-transition: opacity .15s linear;
	transition: opacity .15s linear;
}

#ds-thread #ds-reset .ds-icon-share {
	width: 18px;
	height: 13px;
	background-position: 0 -234px;
}

#ds-thread #ds-reset .ds-comment-actions a {
	font-size: 12px;
	color: #999;
}

#ds-thread #ds-reset .ds-comment-actions a .ds-icon {
	position: relative;
	top: -1px;
}

#ds-thread #ds-reset ul.ds-children {
	margin-left: 38px;
}

#ds-thread #ds-reset .ds-login-buttons {
	width: 100%;
	position: relative;
	padding: 10px 0 6px;
	height: 30px;
}

#ds-thread #ds-reset .ds-login-buttons p {
	float: left;
	line-height: 24px;
	margin: 0;
}

#ds-thread #ds-reset .ds-login-buttons .ds-social-links {
	float: left;
	width: 306px;
}

#ds-thread #ds-reset ul, #ds-thread #ds-reset ul li {
	background: none;
	margin: 0;
	padding: 0;
}

#ds-thread #ds-reset .ds-login-buttons .ds-service-list li {
	float: left;
	height: 16px;
	width: 54px;
	padding: 4px 0;
	margin: 0 0 0 6px;
}

#ds-thread #ds-reset .ds-login-buttons .ds-more-services {
	color: #d32 !important;
	line-height: 16px;
	display: block;
}

#ds-thread #ds-reset .ds-replybox {
	width: auto;
	font-size: 12px;
	z-index: 3;
	margin: 8px 0;
	padding: 0 0 0 60px;
	position: relative;
	_zoom: 1;
}

#ds-thread #ds-reset .ds-replybox .ds-avatar {
	position: absolute;
	top: 0;
	left: 0;
}

#ds-thread #ds-reset .ds-replybox .ds-avatar img {
	width: 50px;
	height: 50px;
	visibility: visible;
	margin: 0;
}

#ds-thread #ds-reset .ds-textarea-wrapper {
	position: relative;
	border: 1px solid #ccc;
	border-bottom: none;
	padding-right: 20px;
	background: #fff url("//static.duoshuo.com/images/bg_sprites.png") 0
		-90px repeat-x;
	overflow: hidden;
}

#ds-reset .ds-rounded-top {
	-webkit-border-top-right-radius: 3px;
	-webkit-border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
}

#ds-thread #ds-reset .ds-textarea-wrapper textarea, #ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text
	{
	display: block;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 20px;
	border: none;
}

#ds-thread #ds-reset .ds-textarea-wrapper textarea {
	box-shadow: none;
	-webkit-appearance: none;
	overflow: auto;
	padding: 10px;
	height: 54px;
	margin: 0;
	resize: none;
	color: #999;
	width: 100%;
}

#ds-thread #ds-reset .ds-textarea-wrapper textarea, #ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text
	{
	display: block;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 20px;
	border: none;
}

#ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text {
	word-wrap: break-word;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 10px;
	right: 10px;
}

#ds-thread #ds-reset .ds-post-toolbar {
	position: relative;
	width: 100%;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

#ds-thread #ds-reset .ds-post-options {
	position: relative;
	margin-right: 100px;
	height: 32px;
	border: 1px solid #ccc;
	border-right: none;
	border-bottom-color: #aaa;
	border-bottom-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
}

#ds-reset .ds-gradient-bg {
	background: url("//static.duoshuo.com/images/bg_sprites.png") 0 -60px
		repeat-x;
}

#ds-thread #ds-reset .ds-post-toolbar span, #ds-thread #ds-reset .ds-post-toolbar input,
	#ds-thread #ds-reset .ds-post-toolbar label, #ds-thread #ds-reset .ds-post-toolbar a
	{
	vertical-align: middle;
	width: auto;
}

#ds-thread #ds-reset .ds-sync {
	font-size: 12px;
	color: #999;
	line-height: 30px;
	position: absolute;
	right: 5px;
}

#ds-thread #ds-reset .ds-post-button {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	position: absolute;
	right: 0;
	top: 0;
	height: 32px;
	width: 100px;
	text-align: center;
	text-shadow: 0 1px 0 #fff;
	color: #555;
	font-size: 14px;
	font-weight: bold;
	border: 1px solid #ccc;
	border-bottom-color: #aaa;
	border-bottom-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	background-color: #e6e6e6;
	background-repeat: no-repeat;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fcfcfc),
		color-stop(25%, #fcfcfc), to(#e6e6e6));
	background-image: -webkit-linear-gradient(#fcfcfc, #fcfcfc 25%, #e6e6e6);
	background-image: -moz-linear-gradient(top, #fcfcfc, #fcfcfc 25%, #e6e6e6);
	background-image: -ms-linear-gradient(#fcfcfc, #fcfcfc 25%, #e6e6e6);
	background-image: linear-gradient(#fcfcfc, #fcfcfc 25%, #e6e6e6);
	-webkit-transition: all .15s linear;
	-moz-transition: all .15s linear;
	transition: all .15s linear;
	box-shadow: inset 0 0 1px #fff;
}

#ds-thread #ds-reset button {
	cursor: pointer;
	margin: 0;
	padding: 0;
	border-radius: 0;
}

#ds-thread #ds-reset .ds-toolbar-buttons {
	position: absolute;
	top: 5px;
	left: 6px;
}

#ds-thread #ds-reset .ds-post-toolbar span, #ds-thread #ds-reset .ds-post-toolbar input,
	#ds-thread #ds-reset .ds-post-toolbar label, #ds-thread #ds-reset .ds-post-toolbar a
	{
	vertical-align: middle;
	width: auto;
}

#ds-thread #ds-reset .ds-add-emote {
	background-position: 0 -12px;
}

#ds-thread #ds-reset .ds-toolbar-button {
	display: block;
	width: 19px !important;
	height: 19px;
	float: left;
	margin-right: 4px;
	background: transparent url("//static.duoshuo.com/images/sprites.png")
		no-repeat;
	_background-image: url("//static.duoshuo.com/images/sprites.gif");
	vertical-align: middle;
	opacity: .6;
	-webkit-transition: opacity .15s linear;
	-moz-transition: opacity .15s linear;
	transition: opacity .15s linear;
}

#ds-thread #ds-reset .ds-comment-actions a:hover {
	font-size: 12px;
	color: #333;
	opacity: .2;
}

#ds-thread #ds-reset .ds-comment-actions a {
	font-size: 12px;
	color: #999;
}

#ds-thread #ds-reset .ds-comment-footer a {
	margin: 0 6px 0 0;
	padding: 0 6px 0 0;
}

#ds-thread #ds-reset .ds-icon-share {
	width: 12px;
	height: 12px;
	background-position: 0 -189px;
}

#ds-thread #ds-reset .ds-icon-like {
	width: 14px;
	height: 13px;
	background-position: 0 -117px;
}

#ds-thread #ds-reset .ds-icon-reply {
	width: 18px;
	height: 13px;
	background-position: 0 -105px;
}

#ds-reset a .ds-icon {
	opacity: .6;
	transition: opacity .15s linear;
}

#ds-reset .ds-icon {
	vertical-align: middle;
	display: inline-block;
	overflow: hidden;
}

.ones-img {
	width: 40px;
	float: left;
	height: 70px;
	position: absolute;
	left: 3px;
	top: 30px;
}

.popover {
	width: 600px;
	margin-left: 70px;
	border: 1px solid #999;
}

.user_name {
	color: blue;
	font-size: 15px;
}

.children-reply {
	display: none;
}

.course-info {
	padding-bottom: 20px;
	margin-top: 10px;
	background-color: #fff;
	overflow: auto;
}

.course-box1 {
	width: 200px;
	height: 125px;
	margin-right: 20px;
	float: left;
	background-color: gray;
}

.course-box2 {
	float: left;
}

.course-box-teacher1 {
	font-size: 15px;
	margin-bottom: 30px;
	width: 400px;
	overflow: auto;
}

.course-box-teacher2 {
	margin-top: 20px;
	margin-bottom: 30px;
	overflow: auto;
}

.course-box-teacher3 {
	margin-top: 20px;
	margin-bottom: 30px;
	width: 400px;
	overflow: auto;
}


.course-box-teacher span {
	font-size: 20px;
	color: #286090;
}

.course-box-button {
	width: 600px;
	margin-top: 40px;
	overflow: auto;
}

.course-box-button a {
	margin-right: 10px;
	font-size: 15px;
}

.course-box-button a:hover {
	text-decoration: none;
}

.course-box-button1 {
	margin-right: 20px;
}

.course-content {
	overflow: hidden;
	background-color: #fff;
}

.course-content .tab-content {
	padding-right: 20px;
}

.content-box {
	text-align: justify;
	overflow: hidden;
	padding: 10px 0px 10px 0px;
}

.content-box h3 {
	float: left;
}

.teacher-img {
	width: 100px;
	float: left;
	margin-right: 20px;
}

.teacher-intro {
	padding: 10px;
	width: 970px;
}

.traffic-tip {
	width: 400px;
	height: 250px;
	background-color: gray;
	margin: 0 auto;
}

.student-works {
	overflow: hidden;
	padding-top: 20px;
}

.student-course {
	width: 200px;
	height: 200px;
	background-color: gray;
	float: left;
	padding: 10px;
	margin-right: 20px;
}

.student-course-img {
	width: 180px;
	height: 150px;
	background-color: white;
}

.discuss-box {
	border: 1px solid gray;
	height: 200px;
	padding: 20px;
	overflow: hidden;
	margin-bottom: 10px;
}

.discuss-box-img {
	height: 160px;
	width: 140px;
	margin-right: 20px;
	float: left;
	padding: 10px;
}

.discuss-box-grade, .discuss-box-comment {
	height: 40px;
	width: 800px;
	float: left;
}

.discuss-box-star {
	height: 40px;
	width: 250px;
	float: left;
}

.discuss-box-label {
	height: 40px;
	width: 800px;
	float: left;
}

.nav {
	padding-top: 10px;
	text-align: left;
	width: 80%;
}

.nav #nav2 {
	cursor: pointer;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	height: 80px;
	width: 120px;
	float: left;
	color: #b7b9bd;
	font-size: 20px;
	padding-top: 40px;
	padding-left: 20px;
}

.nav1 {
	display: block;
	padding-bottom: 10px;
	height: 80px;
	width: 120px;
	color: #000;
}

#myTabContent {
	margin-left: 2%;
	padding-bottom: 20px;
}

.onlineName {
	width: 600px;
}

.onlineName span {
	font-size: 40px;
	color: #55A6CF;
}

.onlineName .submit {
	float: right;
	width: 120px;
}
</style>
<script>
/* 超出一定字符数就显示省略号*/
$(function() {
	$(".text-ellipsis").each(function() {
		var maxwidth = 5;
		if ($(this).text().length > maxwidth) {
			$(this).text($(this).text().substring(0, maxwidth));
			$(this).html($(this).html() + '...');
		}
	});

})
</script>
</head>
<body>
	<#include "/common/header.ftl" parse=true encoding="utf-8">
	<div class="container body_content">
		<div class="row">
			<!-- 主要内容 -->
			<div class="col-md-12">
				<div class="mainleft">
					<#if entity??>
					<div class="course_detail">
						<h4>课程名称&nbsp;>&nbsp;${entity.name!}</h4>
						<div class="course-info ">
							<div class="col-md-2">
							<#if (entity.picUrl??) && (entity.picUrl != "")>
								<img width="200" height="125" src="${base}/io/uploadPreviewAction.do?filename=${entity.picUrl!}"   class="attachment-thumbnail size-thumbnail wp-post-image" sizes="(max-width: 300px) 100vw, 300px">
							<#else>
								<img width="200" height="125" src="${base}/styles/images/common/logo_white_big.png" class="attachment-thumbnail size-thumbnail wp-post-image" sizes="(max-width: 300px) 100vw, 300px">
							</#if>
							</div>
							<div class="col-md-offset-1 col-md-8"  >
								<div class="course-box-teacher1">
									<span class="fl">课程名称：${entity.name!}</span>
								</div>
								<div class="course-box-teacher2">
									<span>课程简介：${entity.intro!}</span>
								</div>
								<div class="course-box-teacher3">
									<span>课程类别：${entity.categoryName!}</span>
									<span class="fr">共有：${entity.chapterNum!}章${entity.lessonNum!}节<span>
								</div>
								<div class="course-box-teacher3">
									<span>累积查看次数：${entity.viewCount!}</span>
									<span class="fr">累积评论次数：${entity.commentCount!}<span>
								</div>
								<div class="course-box-teacher3">
									<span>主讲人：${entity.speakerName!}</span>
									<span class="fr">价格 :<#if (entity.totalPrice == 0)>免费<#else>${entity.totalPrice!}元</#if><span>
								</div>
							</div>
						</div>
						<div id="myTab" class="nav">
							<div class="active nav1" href="#introduce" data-toggle="tab">
								<a id="nav2">课程目录</a>
							</div>
						</div>
						<div class="course-content">
							<div id="myTabContent" class="tab-content">
								<div class="tab-pane active" id="introduce">
									<div class="content-box">
										<#list chapterList as chapter> <font style="font-size: 15px;">${chapter.name!}</font><br>
										<#list lessonList as lesson> 
										<#if lesson.chapterId == chapter.id>
											&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="text-decoration: underline; color: blue; " target="_blank"  onclick="display(${lesson.id!})" >${lesson.name!}</a><br></#if>
										</#list> </#list>
									</div>
								</div>
							</div>
						</div>
					</div>
					</#if>

					<div id="mainBody" class="np-frame"
						style="padding-bottom: 0px; width: 100%; margin-top: 50px;">

						<!----评论框---->

						<div id="top_reply">

							<h1 class="np-title">
								<a href="javascript:void(0)" id="commentTotleNum"
									hidefocus="true"
									style="cursor: default; text-decoration: none;"> <span>${entity.commentCount!}条评论</span>
								</a> 
							</h1>

							<div id="commentArea" class="out">

								<div class="blueLight" id="np-reply-box" style="">

									<div class="np-reply-box-content textarea">
										<textarea tabindex="1" autocomplete="off" name="content"
											id="content" accesskey="u"
											style="height: 100px; padding: 10px; width: 100%;"
											placeholder="请在此输入您的评论内容"></textarea>
									</div>
									<div class="commtSub np-reply-box-footer"
										style="position: relative; display: block; height: 40px"
										id="p_login_btn">
										<!-- 用户登录模块 -->
										<span>文明上网理性发言</span>
										<button type="button" onclick="sub()"
											class="mt10 btn btn-primary btn-block btn-flat w100 fr">发表</button>
									</div>

								</div>

							</div>

						</div>


						<!----评论显示列表---->

						<div>
							<ul class="np-nav-tab">
								<li id="myAllComment" class="np-active">全部评论</li>
							</ul>

							<div id="tab1_allComments">
								<div id="allComments">

									<ul class="post-list np-comment-list">
										<#if (commentList??) && (commentList?size > 0)> 
										<#list commentList as comment>
										<li class="np-post  topIco np-label-digest topAll" id="${comment.id!}">
											<div class="np-tip-newpost"></div>
											<img style="width: 69px; height: 67px;" class="np-avatar popClick" alt="头像"<#if (comment.memberAvatarUrl??) && (comment.memberAvatarUrl != '')>src='${base}/io/uploadPreviewAction.html?filename=${comment.memberAvatarUrl!}' <#else>src='${base}/styles/images/common/default-avatar.png'</#if>>
												<span>
													${comment.memberUsername!}
												</span>
												<span class="">评论时间：${comment.createTime!}</span>
											<div class="np-attitude np-tip-newpost1"></div>
											<div class="np-post-body pb10">
												<div class="np-post-content" data-height="5">
													<p>${comment.content!}</p>
												</div>
											</div>
										</li> </#list> <#else>暂无评论 </#if>
									</ul>
								</div>
								<!-- 全部评论 -->
								<div class="pull-right">
									<#include "/common/pager-auto-reload.ftl" parse=true encoding="utf-8">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<#include "/common/footer.ftl" parse=true encoding="utf-8">

</body>
<script type="text/javascript">

	function display(lessonId){
		<#if Session.member??>
			window.location = "${base}/course/member/"+lessonId+"/display.html";
		<#else>
			window.alert("请您先登录后再观看视频！");
			window.location = "${base}/login.html";
		</#if>
	}

	
		 function sub(){
			if($("#content").val()==''){
				alert("您的评论留言内容不能为空！");
				return;
			}
			<#if Session.member??>
				var url = "${base}/member/comment/course/saveCommentAction.json";
				var entity = {
						targetId: ${entity.id!},
						memberId: ${Session.member.id!},
						memberUsername:"${Session.member.username!}",
						content: $("#content").val()
				};
				var onloadFunc = function(result) {
					if (result.isSuccess == true) {
						history.go(0);
					} else {
						alert(result.message);
					}
				};
				httpRequestPostJson(url, entity, true, onloadFunc); 
			<#else>
			  alert("请您先登录后再发表评论！");
			</#if>
			
		}  
	</script>

</html>